/**
 * 解析歌词字符串
 * 获得一个歌词对象的数组
 * 每个歌词对象：
 * {time：时间，content：歌词内容}
*/
function paramsLrc(params) {
  var Arr = params.split('\n')
  var lrcArr = []
  for (let index = 0; index < Arr.length-1; index++) {
    const element = Arr[index];
    var parts = element.split(']')
    
    var obj = {
      time: paramsTime(parts[0]),
      content: parts[1]
    }
    lrcArr.push(obj)
    
  }
  return lrcArr
}

/**
 * 将时间字符串转换为数数（秒）
 * 例如：'00:00.00' 转换为 0
 * @param: {String} timeStr 时间字符串
 * @return: {Number} 时间（秒）
*/
function paramsTime(timeStr) {
  var timeStr = timeStr.substring(1)
  var timeArr = timeStr.split(':')
  return timeArr[0] * 60 + timeArr[1] * 1
}

var lrcData = paramsLrc(lrc)

// 获取需要的dom元素
var doms = {
  audio: document.querySelector('audio'),
  ul: document.querySelector('.lrc-list'),
  container: document.querySelector('.container')
} 
var el = document.querySelector('.lrc-list')
/**
 * 根据当前播放时间，
 * 在lrcData找到对应的歌词索引使其高亮
*/
function findIndex (){
  // 播放器的当前播放时间
  var currentTime = doms.audio.currentTime
  for (let i = 0; i < lrcData.length; i++) {
    if (currentTime < lrcData[i].time) {
      return i - 1
    }
  }
  // 找遍都没找到 说明播放完了
  return lrcData.length - 1
}

// 界面

/**
 * 根据lrcData 创建页面歌词列表元素 li
*/
function createLrcElement() {
  var frag = document.createDocumentFragment() // 创建一个文档片段
  for (let i = 0; i < lrcData.length; i++) {
    var li = document.createElement('li')
    li.textContent = lrcData[i].content;
    frag.appendChild(li) // 改动了dom 树
  }
  doms.ul.appendChild(frag)
}

createLrcElement()

var containerHeight = doms.container.clientHeight // 获取容器的高度
var liHeight = doms.ul.children[0].clientHeight // 获取每行歌词的高度
var maxOffset = doms.ul.clientHeight - containerHeight // ul 的最大偏移量
/**
 * 设置 ul 元素的偏移量，实现歌词滚动
 * */ 
function setUlOffset() {
  var index = findIndex() // 获取当前播放时间对应的歌词索引
  var offset = index * liHeight + liHeight / 2 - containerHeight / 2 // ul 的偏移量 （px） （已播放的歌词li的高度之和）
  
  if (offset < 0) {
    offset = 0
  }
  if (offset> maxOffset) {
    offset = maxOffset
  }
  doms.ul.style.transform = `translateY(${-offset}px)`;
  // 去除li之前的高亮
  var liIndex = doms.ul.querySelector('.active')
  if (liIndex) {
    liIndex.classList.remove('active')
  }
  liIndex = doms.ul.children[index]
  if (liIndex) {
    doms.ul.children[index].classList.add('active')
  }
}

doms.audio.addEventListener('timeupdate', setUlOffset)